<a href="http://github.com/angular/angular.js/edit/master/docs/content/tutorial/index.ngdoc" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable=""></code>
<div><span class="hint"></span>
</div>
</h1>
<div><div class="tutorial-page tutorial-index-page"><p>A great way to get introduced to AngularJS is to work through this tutorial, which walks you through
the construction of an AngularJS web app. The app you will build is a catalog that displays a list
of Android devices, lets you filter the list to see only devices that interest you, and then view
details for any device.</p>
<p><img class="diagram" src="img/tutorial/catalog_screen.png" width="488" height="413"></p>
<p>Work through the tutorial to see how Angular makes browsers smarter — without the use of extensions
or plug-ins. As you work through the tutorial, you will:</p>
<ul>
<li>See examples of how to use client-side data binding and dependency injection to build dynamic
views of data that change immediately in response to user actions.</li>
<li>See how Angular creates listeners on your data without the need for DOM manipulation.</li>
<li>Learn a better, easier way to test your web apps.</li>
<li>Learn how to use Angular services to make common web tasks, such as getting data into your app,
easier.</li>
</ul>
<p>And all of this works in any browser without modification to the browser!</p>
<p>When you finish the tutorial you will be able to:</p>
<ul>
<li>Create a dynamic application that works in any browser.</li>
<li>Define the differences between Angular and common JavaScript frameworks.</li>
<li>Understand how data binding works in AngularJS.</li>
<li>Use the angular-seed project to quickly boot-strap your own projects.</li>
<li>Create and run tests.</li>
<li>Identify resources for learning more about AngularJS.</li>
</ul>
<p>The tutorial guides you through the entire process of building a simple application, including
writing and running unit and end-to-end tests. Experiments at the end of each step provide
suggestions for you to learn more about AngularJS and the application you are building.</p>
<p>You can go through the whole tutorial in a couple of hours or you may want to spend a pleasant day
really digging into it. If you&#39;re looking for a shorter introduction to AngularJS, check out the
<a href="misc/started">Getting Started</a> document.</p>
<h2 id="working-with-the-code">Working with the code</h2>
<p>You can follow this tutorial and hack on the code in either the Mac/Linux or the Windows
environment. The tutorial relies on the use of Git versioning system for source code management.
You don&#39;t need to know anything about Git to follow the tutorial. Select one of the tabs below
and follow the instructions for setting up your computer.</p>
<div class="tabbable" show="true">
  <div class="tab-pane well" id="git-mac" title="Git on Mac/Linux">
    <ol>
      <li><p>You&#39;ll need Git, which you can get from
         <a href="http://git-scm.com/download">the Git site</a>.</p></li>
      <li><p>Clone the angular-phonecat repository located at
      <a href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
      <pre class="prettyprint linenums">git clone https://github.com/angular/angular-phonecat.git</pre>
      <p>This command creates the <code>angular-phonecat</code> directory in your current
directory.</p></li>
      <li><p>Change your current directory to <code>angular-phonecat</code>:</p>
      <pre class="prettyprint linenums">cd angular-phonecat</pre>
      <p>The tutorial instructions, from now on, assume you are running all commands from the <code>angular-phonecat</code>
directory.</p></li>
      <li><p>You will also need Node.js and Karma to run unit tests, so please verify that you have
      <a href="http://nodejs.org/">Node.js</a> v0.10 or better installed
      and that the <code>node</code> executable is on your <code>PATH</code> by running the following
      command in a terminal window:</p></li>
      <pre class="prettyprint linenums">node --version</pre>
      <p>Additionally install <a href="http://karma-runner.github.io/">Karma</a> and its plugins if you
      don&#39;t have it already:</p>
      <pre class="prettyprint linenums">
      npm install
      </pre></li>
      <li><p>You will need an http server running on your system. Mac and Linux machines typically
have Apache pre-installed, but If you don&#39;t already have one installed, you can use <code>node</code>
to run a simple bundled http server: <code>node scripts/web-server.js</code>.</p></li>
    </ol>
  </div>

  <div class="tab-pane well" id="git-win" title="Git on Windows">
    <ol>
      <li><p>You will need Node.js and Karma to run unit tests, so please verify that you have
        <a href="http://nodejs.org/">Node.js</a> v0.10 or better installed
        and that the <code>node</code> executable is on your <code>PATH</code> by running the following
        command in a terminal window:</p>
        <pre class="prettyprint linenums">node --version</pre>
        <p>Additionally install <a href="http://karma-runner.github.io/">Karma</a> if you
           don&#39;t have it already:</p>
        <pre class="prettyprint linenums">npm install -g karma</pre>
      </li>
      <li><p>You&#39;ll also need Git, which you can get from
               <a href="http://git-scm.com/download">the Git site</a>.</p></li>
      <li><p>Clone the angular-phonecat repository located at <a
      href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
      <pre class="prettyprint linenums">git clone https://github.com/angular/angular-phonecat.git</pre>
      <p>This command creates the <code>angular-phonecat</code> directory in your current directory.</p></li>
      <li><p>Change your current directory to <code>angular-phonecat</code>:</p>
      <pre class="prettyprint linenums">cd angular-phonecat</pre>
      <p>The tutorial instructions assume you are running all commands from the <code>angular-phonecat</code>
directory.</p>
      <p>You should run all <code>git</code> commands from Git bash.</p>
      <p>Other commands like <code>test.bat</code> or <code>e2e-test.bat</code> should be
executed from the Windows command line.</li>
      <li><p>You need an http server running on your system, but if you don&#39;t already have one
already installed, you can use <code>node</code> to run a simple
bundled http server: <code>node scripts\web-server.js</code>.</p></li>
    </ol>
  </div>

<p>The last thing to do is to make sure your computer has a web browser and a good text editor
installed. Now, let&#39;s get some cool stuff done!</p>
<p><a href="tutorial/step_00"><span class="btn btn-primary">Get Started!</span></a></p>
</div></div>
